<template>
	<view class="index">
		<index-header name="首页"></index-header>
	<!-- 轮播图 -->
		<view class="page-section-spacing">
			<swiper class="swiper" autoplay circular indicator-dots>
				<swiper-item>
					<image src="../../static/banner/1.jpg" style="width: 100%;"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/banner/2.jpg" style="width: 100%;"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/banner/3.jpg" style="width: 100%;"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/banner/4.jpg" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
	<!-- nav -->
		<view class="content-nav">
			<view class="nav" v-for="(item,index) in navList" :key="index">
				<image :src="'/static/nav/'+item.icon" style="width: 50px;height: 50px;"></image>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
  
	<!--常用工具  -->
	<view class="tool-title">
		常用工具
	</view>
	<view class="index-tool">
		<view class="tool" v-for="(item,index) in toolList" :key="index">
			<image :src="'/static/tool/'+item.icon" style="width: 25px;height: 25px;"></image>
			<view class="name">
				{{item.name}}
			</view>
		</view>
	</view>
		
	<!-- 猜你喜欢 -->
		<view class="guessLike">
			<view class="like-title">
				猜你喜欢
			</view>
			<view v-for="item in houseList" :key="item.id" class="like-content" @click="clickHouse(item)">
				<image class="houseImg" :src="item.imgs" style="width: 110px;height: 110px" ></image>
				<view class="like-content-right">
					<view class="like-content-info">
						<view class="name">
								{{item.name}}
						</view>
						<view class="range-area">
							<view class="range">
									{{item.range}}
							</view>
							<view class="area">
									{{item.area}}
							</view>
						</view>
						<view class="type-point">
							<view class="type">
									{{item.type}}
							</view>
							<view class="point">
									{{item.point}}㎡ 
							</view>
						</view>
						
					</view>
					<view class="like-price">
							{{item.price}}元/㎡ 起
					</view>
				</view>
			</view>
			<view class="like-bottom" v-show="show">
				<text>已经到底部啦</text>
			</view>
		</view>
		
	</view>
	
	
</template>


<script>
	export default {
		data(){
			return{
				navList:[
					{name:"二手房",icon:"secondHouse.png"},
					{name:"新房",icon:"newHouse.png"},
					{name:"租房",icon:"rentHouse.png"},
					{name:"商业办公",icon:"business.png"},
					{name:"装修",icon:"renovation.png"},
					{name:"找小区",icon:"residentialquarters.png"},
					{name:"卖房",icon:"saleHouse.png"},
				],
				toolList:[
					{name:"找经纪人",icon:"management.png"},
					{name:"问答",icon:"answer.png"},
					{name:"联系客服",icon:"tel.png"},
					{name:"房贷计算器",icon:"calc.png"},
					
				],
				houseList:[],
				curPage:1,
				show:false,
				
			}
		},
		methods:{
			// 发送猜你喜欢的数据请求
			req(page){
				uni.request({
					url:'http://129.211.169.131:6368/gethouse',
					data:{
						page:page,
						pagesize:10,
					},
					success:(res)=>{
						this.houseList.push(...res.data.data)
						console.log(res.data.data)
						// 判断请求的数据是否没了
						if(res.data.data.length==0){
							this.show=true
						}
					}
				})
			},
			
			// 点击猜你喜欢的房子列表
			clickHouse(item){
				// 设置 uni.setStorageSync('key',value)
				// 取值 var val=uni.getStorage.Sync('key')
				//初始化判断
				let arr=uni.getStorageSync("historyList")
				// 如果一开始为空，则给它赋值
				if(!arr){
					uni.setStorageSync("historyList",[])
					arr=uni.getStorageSync("historyList")
				}
				for(let i=0;i<arr.length;i++){
					if(arr[i].name==item.name){
						arr.splice(i,1)
						break;
					}
				}
				// 取出此数组并把它push进去
				uni.setStorageSync("historyList",[item,...arr])
					
			}
			
		},
		// 页面进来请求数据
		onLoad(){
			this.req(this.curPage);
		},
		// 到底底部的时候请求下一页的数据
		onReachBottom() {
			//到达底部就不再请求了
			if(!this.show){
				this.req(++this.curPage)
			}
		},
		
		
	}
	
</script>

<style scoped lang="less">
	// 字体颜色
	@base:#32315B;
	// 背景颜色
	@backGround: #F4F3F8;
	
	.index{
	background-color:@backGround;
		.content-nav{
			padding: 10px 0;
			margin-bottom: 10px;
			display: flex;
			flex-wrap: wrap;			
			.nav{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 5px 0;
				.name{
					padding: 5px 0;
					font-size: 14px;
				}
			}
		}
		
		// 常用工具
		.tool-title{
			font-weight: bold;
			color:@base;
			font-size:18px;
			padding-left: 40rpx;
			height:40px;
			background-color: #fff;
			line-height: 40px;
		}
		.index-tool{
			display: flex;
			background-color: #fff;
			margin-bottom: 10px;
			height: 80px;
			.tool{
				font-size: 14px;
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.name{
					padding:5px 0;
				}
				
			}
		}
		
		// 猜你喜欢模块
		.guessLike{
			.like-title{
				font-weight: bold;
				color:@base;
				font-size:18px;
				padding-left: 40rpx;
				height:40px;
				background-color: #fff;
				line-height: 40px;
				
			}
			.like-content{
				padding-left:20rpx;
				margin: 16px 0;
				display: flex;
				.like-content-right{
					display: flex;
					flex:1;
					justify-content: space-between;
					.like-content-info{
						margin-left:20px;
		
						.name{
							font-weight: bold;
						}
						.range-area{
							font-size:12px;
							display:flex;
							color:gray;
							padding: 8px 0 14px 0;
							.range{
								padding-right: 6px;
							}
						}
						.type-point{
							font-size:12px;
							display:flex;
							color:gray;
							.type{
								padding-right: 6px;
							}
						}
					}
					.like-price{
						padding-top: 20px ;
						margin-right: 10rpx;
						color: #f60;
						font-size: 14px;
					}
				}
				
			}
			.like-bottom{
				font-size: 14px;
				color: gray;
				text-align: center;
			}
		}
	}
	
	
</style>
